<template>
<div v-if="url">
  <ul class="list" >
    <li v-for="a in articles" :key="a.id" class="list-item">
      <Article :article="a" :unlikable="unlikable" @updateArticle="updateArticle" :deletable="deletable" @deleteArticle="deleteArticle"></Article>
    </li>
    <el-pagination
    layout="prev, pager, next"
    :page-size="10"
    :current-page="currentPage"
    @current-change="currentChange"
    :hide-on-single-page="true"
    :total="total">
  </el-pagination>
  </ul>
</div>
</template>

<script>
import Article from '@/components/Article';

export default {
  props: {
    url: {
      type: String,
      default: 'articles/',
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    unlikable: {
      type: Boolean,
      default: false
    },
    deletable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      articles: [],
      total: 0,
    };
  },
  mounted() {
    this.get_articles();
  },
  components: {
    Article,
  },
  methods: {
    get_articles() {
      this.$http.get(this.url).then((res) => {
        this.articles = res.data.results;
        this.total = res.data.count;
      });
    },
    currentChange(currentPage) {
      this.$emit('pageChanged', currentPage);
    },
    updateArticle(newArticle){
      this.$emit("updateArticle", newArticle.id)
    },
    deleteArticle(val){
      this.$emit("deleteArticle", val)
    }
  },
};
</script>

<style scoped>
.list-item{
    margin: 1em;
    list-style: none;
}
</style>
